<script setup>
import { ref, onMounted } from 'vue'

const innerHTMLStr = ref('<p><div>1212</div></p>')
const innerHTMLDIV = ref(null)  
const innerHTMLShow = ref('')

const convertHTML = () => {
    innerHTMLDIV.value.innerHTML = innerHTMLStr.value
    innerHTMLShow.value = innerHTMLDIV.value.innerHTML
}

onMounted(() => {
    
})
</script>

<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="innerHTML">
        <ul>
            <li>{{ `支持自定义标签，如：<mycompnent></mycompnent>` }}</li>
            <li>{{ `嵌套不合法会默认处理，如：<div><tr>123</tr></div>` }}</li>
            <li>{{ `不合法会默认补全，如：<div>123` }}</li>
            <li>{{ `script脚本不会执行，如：<script>alert(1)</script>` }}</li>
        </ul>
        <div style="display: flex; align-items: center; gap: 5px;">
            <el-input v-model="innerHTMLStr" type="textarea" :rows="5" style="resize: none;" placeholder="请输入要转换的HTML结构字符串"></el-input>
            <el-button type="primary" @click="convertHTML">转换</el-button>
        </div>
        <p>转换效果</p>
        <div ref="innerHTMLDIV"></div>
        <p>转换结果</p>
        <div>{{ innerHTMLShow }}</div>
        
        <hr class="hr-solid-content" data-content="insertAdjacentHTML">
        <p>同innerHTML，转DOM实用性不如innerHTML</p>

        <hr class="hr-solid-content" data-content="DOMParser">
        <p><code>let nodes = new DOMParser().parseFromString(html, 'text/html').body.childNodes;</code></p>

        <hr class="hr-solid-content" data-content="Range">
        <p><code>let elements = document.createRange().createContextualFragment(html).children;</code></p>
        <p>该方法传入的script脚本会执行</p>
    </div>
</template>

<style scoped>
.wrapper {
    padding: 10px;
}
</style>